<template>
	<view>
		<u-tabs :is-scroll="false" swiperWidth="750" activeColor="#F4333C" :list="list" :current="current"
			@change="change"></u-tabs>
		<view v-if="current === 1" class="main">
			<liveCard v-for="(item, index) in liveData" :item="item" :key="index"></liveCard>
		</view>

		<view v-else class="qualityPage">
			<view class="tipInfo">
				<image class="tipImg" :src="qualityData.img" mode=""></image>
				<text @click="toEditInfo" :style="{ color: qualityData.status === 3 ? 'red' : '' }"
					class="tipText">{{ qualityData.text }}</text>
				<view v-if="qualityData.status === 2">不通过理由：{{ qualityData.reason }}</view>
			</view>
			<u-button @click="handleBtn" v-if="qualityData.btnText" class="qualityBtn" type="error" shape="circle">{{
        qualityData.btnText
      }}</u-button>
		</view>
	</view>
</template>

<script>
	import liveCard from "@/components/liveCard/liveCard.vue";
	import pic1 from "@/static/img/live/pic1.png";
	import pic2 from "@/static/img/live/pic2.png";
	import pic3 from "@/static/img/live/pic3.png";
	import pic4 from "@/static/img/live/pic4.png";
	import storage from "@/utils/storage.js";
	import api from "@/config/api.js";
	export default {
		components: {
			liveCard,
		},
		data() {
			return {
				qualityList: [{
						status: 0,
						img: pic1,
						text: "您还没申请开通~",
						btnText: "直播申请",
					},
					{
						status: 1,
						img: pic2,
						text: "直播资质审核中，请耐心等待...",
						btnText: "查看直播申请信息",
					},
					{
						status: 2,
						img: pic3,
						text: "直播资质审核不通过",
						btnText: "修改直播信息",
						reason: "您不符合平台的资质，请修改后再提交",
					},
					{
						status: 3,
						img: pic4,
						text: "修改直播信息",
						btnText: "开启视频直播",
					},
					{
						status: 4,
						img: pic4,
						text: "直播已下架，请联系管理员",
						btnText: "",
					},
				],
				qualityStatus: 0,
				qualityData: {},
				exportInfo: {}, // 专家信息
				list: [{
					name: "直播"
				}, {
					name: "直播记录"
				}],
				current: 0,
				info: {},
				liveData: [], // 直播记录
			};
		},
		created() {
			this.getQulityInfo();
		},
		methods: {
			change(index) {
				this.getRecord();
				this.current = index;
			},
			// 获取资质信息接口
			getQulityInfo() {
				return new Promise((resolve) => {
					uni.request({
						url: api.expert + "/expert/broadcast/studio",
						header: {
							"content-type": "application/x-www-form-urlencoded",
							accessToken: storage.getAccessToken(),
							refreshToken: storage.getRefreshToken(),
						},
						success: ({
							data
						}) => {
							if (data.success) {
								let res = data.result;
								this.exportInfo = res;
								if (res.process) {
									if (res.process == "TOBEAUDITED") this.qualityStatus = 1;
									if (res.process == "REFUSE") this.qualityStatus = 2;
									if (res.process == "PASS") {
										if(res.isOnline == 2) {
											this.qualityStatus = 4
										}  else {
											
											this.qualityStatus = 3;
										}
									} 
								} else {
									this.qualityStatus = 0;
								}
								// this.qualityStatus = 3;
								this.qualityData = this.qualityList.find(
									(item) => item.status == this.qualityStatus
								);
								resolve()
							}
							
						},
					});
				})

			},
			// 获取直播记录
			getRecord() {
				uni.request({
					url: api.expert + "/expert/broadcast/studio/recode",
					header: {
						"content-type": "application/x-www-form-urlencoded",
						accessToken: storage.getAccessToken(),
						refreshToken: storage.getRefreshToken(),
					},
					success: ({
						data
					}) => {
						if (data.success) {
							this.liveData = data.result.records || [];
						}
					},
				});
			},
			// 修改直播信息
			toEditInfo() {
				// 调转到另一个页面
				if (this.qualityStatus === 3) {
					uni.navigateTo({
						url: "/pages/mine/live/createLive?action=edit&params=" +
							JSON.stringify(this.exportInfo),
					});
				}
			},
			async openVideo() {
				await this.getQulityInfo();
				let info = {
					id: 'expert_' + this.$store.state.userInfo.id,
					idUser: this.$store.state.userInfo.id,
					realName: this.$store.state.userInfo.realName,
					resRoomId: this.exportInfo.roomId, // 专家端提前定义好房间号roomId
					oldRoomId: this.exportInfo.oldRoomId,
					liveTitle: this.exportInfo.name,
					roomId: "", // 用户看直播用，专家开播不传
					userAvatar: this.$store.state.userInfo.face ||
						"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
				};
				// 开启直播
				if (this.exportInfo.status == "NOT_STARTED" && this.exportInfo.process === 'PASS') {
					uni.navigateTo({
						url: "/pages/mine/liveRoomWebView/liveRoomWebView?val=" +
							JSON.stringify(info) +
							"&info=" +
							JSON.stringify(this.exportInfo),
					});
				} else {
					// 提示
					uni.showModal({
						title: '提示',
						content:'开启视频直播失败，请重试'
					})
				}
			},
			// 资质的按钮
			handleBtn() {
				const that = this;
				// 根据资质的状态去执行
				switch (this.qualityStatus) {
					case 0:
						// 申请资质
						uni.navigateTo({
							url: "/pages/mine/live/createLive?action=add&params=" +
								JSON.stringify(this.exportInfo),
						});
						break;
					case 1:
						// 正在审核资质
						break;
					case 2:
						// 不通过、去修改资质
						uni.navigateTo({
							url: "/pages/mine/live/createLive?action=edit&params=" +
								JSON.stringify(this.exportInfo),
						});
						break;
					case 3:
						// #ifdef APP-PLUS
						plus.android.requestPermissions(
							["android.permission.RECORD_AUDIO"],
							(e) => {
								if (e.granted.length > 0) {
									//权限被允许
									plus.android.requestPermissions(
										["android.permission.CAMERA"],
										(a) => {
											if (a.granted.length > 0) {
												that.openVideo();
											}
										},
										(a) => {}
									);
								}
							},
							(e) => {}
						);
						// #endif
						//  #ifdef H5
						that.openVideo();
						// #endif
						break;
				}
			},
		},
	};
</script>

<style lang="scss">
	::v-deep.u-dropdown {
		background-color: #fff;
	}

	.qualityPage {
		display: flex;
		flex-direction: column;
		position: relative;

		.qualityBtn {
			width: 90%;
			position: fixed;
			bottom: 32rpx;
			left: 0;
			right: 0%;
			margin: auto;
		}

		.tipInfo {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: 50%;
			width: 100%;
			margin-top: 50%;
			transform: translate(-50%, -50%);

			.tipImg {
				display: inline-block;
				width: 360rpx;
				height: 360rpx;
			}

			.tipText {
				font-size: 28rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.main {
		margin: 37rpx 30rpx;
	}
</style>
